import React, { Fragment } from 'react';
import { Link, Redirect, Switch, Route } from 'dva/router';
import DocumentTitle from 'react-document-title';
import { Icon, Layout, Menu, Dropdown, Avatar } from 'antd';
import GlobalFooter from '../components/GlobalFooter';
import styles from './Waf.less';
import { getRoutes } from '../utils/utils';
import { connect } from 'dva';
import NotFound from '../routes/Exception/404';
import { title as Title } from '../title';

const { Header, Content, Footer } = Layout;

const copyright = (
    <Fragment>
        <p className={styles.footer}>
    Copyright <Icon type="copyright" />{Title}
        </p>
    </Fragment>
);

@connect(({ user, loading }) => ({
    user:user.user||'',
    loading: loading.effects['user/fetchCurrent'],
})) //eslint-disable-line
class WafLayout extends React.PureComponent {
    getPageTitle(options = {}) {
        const { routerData, location } = this.props;
        const { pathname } = location;
        const { isNav = false } = options;
        let title = Title;
        const currentRouterName = routerData[pathname] && routerData[pathname].name;

        if (!currentRouterName) return '';

        if (isNav) {
            title = currentRouterName;
        }

        if (!isNav) {
            title = `${currentRouterName} - ${Title}`;
        }

        return title;
    }
    handleMenuClick = ({ key }) => {
        const {
            dispatch,
        } = this.props;
        if (key === 'logout') {
            dispatch({
                type: 'user/logout',
            });
        }
    };

    render() {
        const { routerData, match, location: { pathname }, user: currentUser } = this.props;
        const menu = (
            <Menu className={styles.menu} selectedKeys={[]} onClick={this.handleMenuClick}>
                {currentUser && (
                    <Menu.Item disabled>
                        <Icon type="user" />
                        {currentUser ? currentUser : ''}
                    </Menu.Item>
                )}
                {currentUser && <Menu.Divider />}
                <Menu.Item key="logout">
                    <Icon type="logout" />
                    退出登录
                </Menu.Item>
            </Menu>
        );
        return (
            <DocumentTitle title={this.getPageTitle()}>
                <Layout className={styles.container}>
                    <Header style={{
                        background: '#2A76D1',
                        zIndex: 10,
                        width: '100%',
                        height: 50,
                        lineHeight: '50px',
                    }}
                    >
                        <div
                            style={{
                                maxWidth: 1366,
                                height: 50,
                                margin: '0 auto',
                            }}
                        >

                            <div className={styles.logo}>
                                <Link to="/" className="link">{Title}</Link>
                            </div>
                            <div style={{ float: 'left' }}>
                                <Menu
                                    theme="dark"
                                    mode="horizontal"
                                    style={{
                                        background: 'transparent',
                                        height: '50px',
                                        lineHeight: '50px',
                                    }}
                                    selectedKeys={[pathname]}
                                >
                                    <Menu.Item key="/user-list"><Link to="/user-list" replace={pathname === '/user-list'}><div>用户管理</div></Link></Menu.Item>
                                    <Menu.Item key="/transaction-list"><Link to="/transaction-list" replace={pathname === '/transaction-list'}><div>交易管理</div></Link></Menu.Item>
                                </Menu>
                            </div>
                            <div className={styles.user}>
                                {(
                                    <Dropdown overlay={menu}>
                                        <span className={`${styles.action} ${styles.account}`}>
                                            <Avatar
                                                size="small"
                                                className={styles.avatar}
                                                src={
                                                    require('../assets/default-avatar.gif')
                                                }
                                            />
                                        </span>
                                    </Dropdown>
                                )}
                            </div>
                        </div>
                    </Header>
                    <Content style={{ display: 'flex', flexDirection: 'column', padding: '0 50px', background: '#fff' }}>
                        <Switch>
                            {getRoutes(match.path, routerData).map(item => (
                                <Route
                                    key={item.key}
                                    path={item.path}
                                    component={item.component}
                                    exact={item.exact}
                                />
                            ))}
                            <Redirect exact from="/" to="/user-list" />
                            <Route render={NotFound} />
                        </Switch>
                    </Content>
                    <Footer style={{ background: '#2A76D1', padding: 0 }}>
                        <GlobalFooter copyright={copyright} />
                    </Footer>
                </Layout>
            </DocumentTitle>
        );
    }
}

export default WafLayout;
